<template>
  <div class="search-wrap">
    <!--搜索框-->
    <!--下来筛选框-->
    <!--产品列表-->
    <div class="searchbikeList">
      <div>
        <div class="search-intro">搜索结果：</div>
      </div>
      <!--            山地车-->
      <div class="mountain-bike-list">
        <!-- <h2 class="mountain-bike-name">山地车</h2> -->
        <div class="mountain-bike-main clearfix" v-show="bikeList.length>0">
          <div
            class="mountain-bike-item"
            v-for="(item, index) in bikeList"
            :key="index"
            @click="bikeDetail(item.id)"
          >
            <div class="bike-item-img">
              <img :src="item.cover" :alt="item.cover" />
            </div>
            <div class="bike-content">
              <p>{{item.title}}</p>
              <p class="bike-desc">{{item.intro}}</p>
            </div>
          </div>
        </div>
        <div
          style="min-height: 1000px;width: 1200px;margin: 0 auto;text-align:center; font-size:20px"
          v-show="bikeList.length === 0"
        >暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import { BASE_URL, bikeList } from "../../../api";
export default {
  name: "Search",
  data() {
    return {
      BASE_URL: BASE_URL,
      bikeList: []
    };
  },
  watch: {
    "$route.query": function() {
      let { kind = "", title = "" } = this.$route.query;
      this.getBikeList({
        kind,
        title
      });
    }
  },
  mounted() {
    let { kind = "", title = "" } = this.$route.query;
    this.getBikeList({
      kind,
      title
    });
  },
  methods: {
    async getBikeList({ title = "", kind = "" }) {
      //   let containBike = this.getKindListItem("山地车");
      let res = await bikeList({ title, kind });
      // eslint-disable-next-line no-console
      console.log(res, "bikeList");
      if (res.code === 200) {
        // this.bikeList = res.result.bikeList;
        this.bikeList = this.getFirstImg(res.result.bikeList);
      }
    },
    //提出第一张图片
    getFirstImg(bikeList) {
      let list = [];
      let count = 0;
      bikeList &&
        bikeList.forEach(item => {
          let imagesArr = JSON.parse(item.images);
          // imagesArr[0].file = this.BASE_URL + imagesArr[0].file;
          item.cover = this.BASE_URL + imagesArr[0].file;
          count++;
          if (count <= 5) {
            list.push(item);
          }
        });
      // eslint-disable-next-line no-console
      console.log(bikeList, "bikeList---getFirstImg");
      return list;
    },
    bikeDetail(id) {
      this.$router.push({ path: `/user/bikeDetail/${id}` });
    }
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.search-wrap {
  .search-intro {
    margin: 30px 0;
    font-size: 15px;
  }

  .searchbikeList {
    min-height: 1000px;
    width: 1200px;
    margin: 0 auto;

    .mountain-bike-list {
      width: 1200px;
      height: 290px;
      margin: 30px auto;

      .mountain-bike-name {
        height: 80px;
        line-height: 80px;
        font-size: 20px;
      }

      .mountain-bike-main {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .mountain-bike-item {
          width: 224px;
          height: 200px;
          box-shadow: 0 0 4px 2px #eee;
          border-radius: 5px;
          margin-right: 20px;
          margin-bottom: 10px;
          cursor: pointer;

          .bike-item-img {
            width: 100%;
            height: 140px;
            border-radius: 5px;
            overflow: hidden;

            img {
              object-fit: cover;
              width: 100%;
              height: 100%;
              border-radius: 5px;
              transition: all 0.4s;
            }

            img:hover {
              transform: scale(1.2);
            }
          }

          .bike-content {
            height: 60px;
            border-top: 1px solid #eee;
            border-radius: 10px;

            p {
              height: 30px;
              // line-height 30px
              padding: 7px 0 0 8px;
              box-sizing: border-box;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }

            .bike-desc {
              font-size: 13px;
              color: #888888;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }
        }

        .mountain-bike-item:nth-child(5n) {
          margin-right: 0 !important;
        }

        .mountain-bike-item:hover {
          box-shadow: 0 0 15px 1px #ccc;
        }
      }
    }
  }
}
</style>
